<template>
    <div class="flfenfx" id="drugEchartBox"></div>
    <div class="legendBox">
        <div class="item"><i></i>使用面积：{{count&&count.landArea?count.landArea:0}}(亩)</div>
        <div class="item"><i style="background:#FF9C00;"></i>用药量：{{count&&count.yaowuNum?count.yaowuNum:0}}(ml)</div>
        <div class="item"><i style="background:#3A92FF;"></i>每亩平均用量：{{count&&count.avgYaowuNum?count.avgYaowuNum:0}}(ml)</div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import * as echarts from 'echarts';

const props = defineProps({
    chart: {
        type: Object,
        default: null,
    },
    count: {
        type: Object,
        default: null
    }
})

watch(
    ()=>props.chart,
    (chart)=>{
        createechart()
    }
)

const createechart = () => {

    if( !props.chart || !props.chart.length ){
        return
    }

    let chartDom = document.getElementById('drugEchartBox')
    let myChart = echarts.init(chartDom)

    let operationTimeList = []
    let areaSizeList = []
    let avgList = []
    let medicationNumList = []

    props.chart.forEach(c => {
        operationTimeList.push(c.operationTimeStr)
        // areaSizeList.push(c.mapAreaSize)
        avgList.push(c.sumYaowuNum)
        medicationNumList.push(c.yaowuNum)

    })

    const mt = props.count
    mt.ywNumAvg = mt.avgYaowuNum

    const option = {
        backgroundColor: '#F4F4F4',
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        legend: {
          show:false
        },
        xAxis: [
          {
            type: 'category',
            data: operationTimeList,
          }
        ],
        yAxis: [
          {type: 'value',},
          {type: 'value',},
          {type: 'value',}
        ],
        series: [
          {
            name: '共计面积'+mt.landArea+'亩',
            type: 'bar',
            data: areaSizeList,
            label: {
              show: true,
              position: 'top',
              color:'#06AF71'
            },
            barGap: 0,
            barWidth: '16px',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#57CDA2' },
                { offset: 1, color: '#04AE70' }
              ]),
              borderRadius: [50, 50, 0, 0]
            }
          },
          {
            name: '共计用药量：'+mt.ywNum+'kg',
            type: 'bar',
            data: medicationNumList,
            label: {
              show: true,
              position: 'top',
              color:'#FF811E'
            },
            barGap: 0,
            barWidth: '16px',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF9E25' },
                { offset: 1, color: '#FF811E' }
              ]),
              borderRadius: [50, 50, 0, 0]
            }
          },
          {
            name: '共计每亩平均用量'+mt.ywNumAvg+'kg',
            type: 'line',
            yAxisIndex: 2,
            data: avgList,
            label: {
              show: true,
              position: 'top',
              color:'#3C93FE'
            },
            itemStyle: {
              color: '#3A92FF',
            }
          }
        ]
    }
    option && myChart.setOption(option);
}
</script>

<style lang="scss" scoped>
.flfenfx {
    height: 620px;
    background: #F4F4F4;
    margin: 40px 0 0 0;
}
.legendBox{
    display: flex;
    height: 70px;
    background: rgba(0, 176, 112,0.1);
    margin: 27px 0 0 0;
    .item{
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
        padding: 0 0 0 38px;
        i{
            display: block;
            width: 20px;
            height: 20px;
            background: #04AE70;
            margin: 0 12px 0 0;
        }
    }
}
</style>